<template>
	<view class="container">
		<!-- 我的页面 -->
		<u-navbar leftIcon="arrow-left" @leftClick="back" title="救援记录" bg-color="#00000000" titleStyle="color:#fff" leftIconColor="#fff"
			placeholder></u-navbar>

		<view class="content">
			<!-- 背景 -->
			<view class="top-bg"></view>

			<view class="main">
				<view class="list">
					<view class="top">
						<text class="title">换胎</text>
						<text class="time">2023-02-15</text>
					</view>
					<view>
						<text class="name">订单编号：</text>
						<text class="text">121215555468875</text>
					</view>
					<view>
						<text class="name">位置：</text>
						<text class="text">洛阳市道北路32号xxx小区</text>
					</view>
					<view>
						<text class="name">车牌：</text>
						<text class="text">奔驰FWE4/豫A98FHJ</text>
					</view>
				</view>

				<view class="list">
					<view class="top">
						<text class="title">拖车</text>
						<text class="time">2023-02-15</text>
					</view>
					<view>
						<text class="name">订单编号：</text>
						<text class="text">121215555468875</text>
					</view>
					<view>
						<text class="name">起点：</text>
						<text class="text">洛阳市道北路32号xxx小区</text>
					</view>
					<view>
						<text class="name">终点：</text>
						<text class="text">洛阳市道北路39号xxxxxx小区</text>
					</view>
					<view>
						<text class="name">车牌：</text>
						<text class="text">奔驰FWE4/豫A98FHJ</text>
					</view>
				</view>

				<view class="list">
					<view class="top">
						<text class="title">搭电</text>
						<text class="time">2023-02-15</text>
					</view>
					<view>
						<text class="name">订单编号：</text>
						<text class="text">121215555468875</text>
					</view>
					<view>
						<text class="name">位置：</text>
						<text class="text">洛阳市道北路32号xxx小区</text>
					</view>
					<view>
						<text class="name">车牌：</text>
						<text class="text">奔驰FWE4/豫A98FHJ</text>
					</view>
				</view>
				<!-- <view class="placeholder"></view> -->

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			// 返回上个页面
			back() {
				uni.navigateBack({});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		position: absolute;
		top: 0;

		.top-bg {
			width: 750rpx;
			height: 400rpx;
			// background-image: url('http://www.img.ttblog.cn/car/header-bg.png');
			background-color: #3384FC;
			background-size: cover;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
		}

		.main {
			transform: translateY(-170rpx);
			margin-top: -70rpx;
			padding: 0 20rpx;

			.list {
				padding: 30rpx 30rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.top {
					// height: 80rpx;
					padding-bottom: 18rpx;
					border-bottom: 7rpx solid #f7f7f7;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.title {
						font-size: 33rpx;
						color: #3384FC;
					}

					.time {
						font-size: 24rpx;
						color: #858585;
					}

				}

				.name {
					font-size: 24rpx;
					margin-top: 18rpx;
					display: inline-block;
				}

				.text {
					font-size: 24rpx;
					color: #858585;
				}
			}



			.placeholder {
				height: 15.33vw;
			}

			/deep/ .u-button {
				width: 80%;
				background-color: #D9D9D9;
				color: #fff;
			}
		}
	}
</style>